<template>
	<view class="order-detail-container">
		<uv-gap height="5" bgColor="transparent" />
		<!-- 进度条 -->
		<view class="progress-section">
			<uv-steps :current="info.service_status-1" dot active-color="#4bc3a7">
				<uv-steps-item title="下单预约"></uv-steps-item>
				<uv-steps-item title="安排人员"></uv-steps-item>
				<uv-steps-item title="上门服务"></uv-steps-item>
				<uv-steps-item title="服务完成"></uv-steps-item>
			</uv-steps>
			<!-- 服务人员信息 -->
			<view class="staff-info" v-if="info.technician.name" @click="showTecInfo">
				<view class="icon">
					<uv-avatar :src="info.technician.avatar || getIconPath('avatar.png')" size="50"
						customStyle="margin-right:10px" />
				</view>
				<view class="lbl-info">
					<view class="staff-name">{{info.technician.name}} <uv-icon
							name="https://linshitong.oss-cn-shenzhen.aliyuncs.com/dev/image/2025/0816/a9667202508161143239933.png"
							size="16" v-if="info.technician_id>0 && info.takes_order_status>0"></uv-icon></view>
					<view class="staff-desc">{{info.technician.describe}}</view>
				</view>
			</view>
		</view>
		<view class="order-section">
			<uv-text text="订单信息" bold="true" size="14"></uv-text>
			<view class="flex padding2">
				<image :src="info.product_image" class="thumb" />
				<view class="flex-1 flex align-start justify-between">
					<view>
						<uv-text :text="info.product_name" color="#333" size="15" />
						<uv-text :text="info.spec_values" :custom-style="{background:'#f2f2f2',padding:'5px'}"
							color="#333" size="11" v-if="info.spec_values" />
					</view>

					<view class="jiage">
						<view class="t1">￥{{info.product_price}}</view>
						<view class="t2">x{{info.num}}</view>
					</view>
				</view>
			</view>
			<view class="order-info">
				<view class="lbl_info">服务时间</view>
				<view class="content_info">{{info.service_time}}</view>
			</view>
			<view class="order-info">
				<view class="lbl_info">服务地点</view>
				<view class="content_info">{{info.address_address}}</view>
			</view>
			<view class="order-info">
				<view class="lbl_info">服务总额</view>
				<view class="content_info">￥{{info.total_price}}</view>
			</view>
			<view class="order-info" v-if="info.night_price">
				<view class="lbl_info">夜间调度费</view>
				<view class="content_info">￥{{info.night_price}}</view>
			</view>
			<view class="order-info">
				<view class="lbl_info">实付金额</view>
				<view class="content_info">￥{{info.total_price}}</view>
			</view>
			<view class="order-info">
				<view class="orderNo" @click="showBase">
					<view class="lbl_pay">订单编号：</view>{{info.order_no}}<uv-icon :name="iconName" size="16"></uv-icon>
				</view>
				<uv-button size="mini" type="primary" plain @click="copyOrderNo" style="margin-left: 10px;">
					复制
				</uv-button>
			</view>
			<view v-if="showPayInfo">
				<view class="order-info">
					<view class="lbl_pay">支付时间：</view>
					<view class="pay_info">{{info.pay_time}}</view>
				</view>
				<view class="order-info">
					<view class="lbl_pay">支付方式：</view>
					<view class="pay_info">{{info.pay_name}}</view>
				</view>
			</view>
		</view>


		<!-- 底部按钮 -->
		<view class="footer-btn">
			<view class="order-actions">
				<!-- 联系客服 -->
				<uv-button class="contact-service" plain icon="kefu-ermai" size="normal" @click="contactService">
					联系客服
				</uv-button>
				<uv-button class="modify-order" plain type="error" size="normal" @click="modifyOrder"
					v-if="info.status<2">
					修改订单
				</uv-button>
				<uv-button class="cancel-order" type="error" size="normal" @click="iPay" v-if="info.status==0">
					立即支付
				</uv-button>
				<uv-button class="cancel-order" type="error" size="normal" @click="cancelOrder" v-if="info.status==1">
					取消订单
				</uv-button>
				<uv-button class="modify-order" plain type="error" size="normal" @click="assApply"
					v-if="info.status==2">
					申请售后
				</uv-button>
				<uv-button class="cancel-order" type="error" size="normal" @click="comment" v-if="info.status==2">
					去写评价
				</uv-button>
			</view>
		</view>
		<uv-popup ref="popupRef" mode="bottom" round="10">
			<view class="popup-content">
				<view class="flex align-end justify-center">
					<text class="price1">¥{{payAmount}}</text>
				</view>
				<uv-gap height="20" bgColor="transparent" />
				<uv-cell-group :border="false">
					<uv-cell v-for="(item, index) in payList" :key="index" :icon="item.piclink" :title="item.pay_name"
						@click="getPayType(index)" :border="false" titleStyle="font-size:14px">
						<template #value>
							<uv-icon name="checkmark-circle-fill" color="#C52923" size="20"
								v-if="payType == item.type" />
							<uv-icon name="checkmark-circle" color="#B1B1B1" size="20" v-else />
						</template>
					</uv-cell>
				</uv-cell-group>
				<uv-gap height="20" bgColor="transparent" />
				<view class="btn">
					<uv-button text="确认付款" color="#C52923" shape="circle" @click="closePopup" />
				</view>
			</view>
		</uv-popup>
		<uv-popup ref="popPwdRef" mode="center" round="10" closeable>
			<view class="popup-content pwd_pop">
				<uv-text text="输入密码" bold="true" size="15" align="center"></uv-text>
				<uv-gap height="20" bgColor="transparent" />
				<view class="flex align-center justify-center padding2">
					<uv-input placeholder="请输入支付密码" type="password" v-model="payPwd" />
				</view>
				<uv-gap height="20" bgColor="transparent" />
				<view class="btn">
					<uv-button text="确认支付" color="#C52923" shape="circle" @click="doPay" />
				</view>
			</view>
		</uv-popup>
		<uv-popup ref="popCancelRef" mode="bottom" round="10">
			<view class="popup-content pwd_pop">
				<view class="staff-info" v-if="info.technician.name" @click="showTecInfo">
					<view class="icon">
						<uv-avatar :src="info.technician.avatar || getIconPath('avatar.png')" size="50"
							customStyle="margin-right:10px" />
					</view>
					<view class="lbl-info">
						<view class="staff-name">{{info.technician.name}} <uv-icon
								name="https://linshitong.oss-cn-shenzhen.aliyuncs.com/dev/image/2025/0816/a9667202508161143239933.png"
								size="16" v-if="info.technician_id>0 && info.takes_order_status>0"></uv-icon></view>
						<view class="staff-desc">{{info.technician.describe}}</view>
					</view>
				</view>
				<uv-text text="您预约时段属运力高峰期，已为您安排高评分服务人员提供服务，建议尽量不要取消~" bold="true" size="15"></uv-text>
				<uv-gap height="10" bgColor="transparent" />
				<uv-text type="info" text="服务开始0.5小时前可无责取消 查看取消规则" size="10" @click="showRule"
					suffixIcon="arrow-right"></uv-text>
				<uv-gap height="20" bgColor="transparent" />
				<view class="but">
					<uv-button text="狠心取消" type="info" style="width:40%" @click="doCancel" />
					<uv-button text="暂不取消" color="#C52923" style="width:40%" @click="closeCancel" />
				</view>
			</view>
		</uv-popup>
		<uv-popup ref="popRuleRef" mode="bottom" round="10">
			<view class="popup-content pwd_pop">
				<uv-text :text="rule.title" bold="true" size="15"></uv-text>
				<uv-gap height="10" bgColor="transparent" />
				<rich-text :nodes="rule.content" class="rule" />
				<uv-gap height="20" bgColor="transparent" />
				<view class="confirmbtn">
					<uv-button text="我知道了" type="info" style="width:80%" @click="confirmRule" />
				</view>
			</view>
		</uv-popup>
		<uv-popup ref="popRejectRef" mode="bottom" round="10">
			<view class="popup-content pwd_pop">
				<view class="staff-info" v-if="info.technician.name" @click="showTecInfo">
					<view class="icon">
						<uv-avatar :src="info.technician.avatar || getIconPath('avatar.png')" size="50"
							customStyle="margin-right:10px" />
					</view>
					<view class="lbl-info">
						<view class="staff-name">{{info.technician.name}} <uv-icon
								name="https://linshitong.oss-cn-shenzhen.aliyuncs.com/dev/image/2025/0816/a9667202508161143239933.png"
								size="16" v-if="info.technician_id>0 && info.takes_order_status>0"></uv-icon></view>
						<view class="staff-desc">{{info.technician.describe}}</view>
					</view>
				</view>
				<uv-gap height="20" bgColor="transparent" />
				<uv-text :text="'工作人员正在服务中，订单无法' + opName + '哦~如有需要可点击联系客服'" bold="true" size="30upx"></uv-text>
				<uv-gap height="20" bgColor="transparent" />
				<view class="confirmbtn">
					<uv-button text="联系客服" icon="kefu-ermai" iconSize="20" type="info" style="width:80%"
						@click="contactService" />
				</view>
			</view>
		</uv-popup>
		<uv-popup ref="popTecInfoRef" mode="bottom" round="10" closeable v-if="info.technician_id>0">
			<tecInfo :tecId="info.technician_id"></tecInfo>
		</uv-popup>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		getIconPath
	} from '@/util'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		getServiceInfo,
		cancelServiceOrder,
		getCancelRule,
		getPaymentMethod,
		goPay
	} from '@/api'
	import {
		useRefreshStore
	} from '@/store'
	import tecInfo from './components/tecInfo.vue'
	const refreshStore = useRefreshStore()
	const payList = ref([])
	const payType = ref('')
	const payPwd = ref('')
	const is_third_party_payment = ref(0)
	const popupRef = ref(null)
	const popPwdRef = ref(null)
	const payAmount = ref(0)
	const info = ref({
		address: {
			province: '',
			city: '',
			area: '',
			address: ''
		}
	})
	const showPayInfo = ref(false)
	const iconName = ref('arrow-down')
	const popCancelRef = ref(null)
	const popRuleRef = ref(null)
	const popRejectRef = ref(null)
	const popTecInfoRef = ref(null)
	const opName = ref('取消')
	const rule = ref({})
	const showBase = () => {
		showPayInfo.value = !showPayInfo.value
		iconName.value = iconName.value === 'arrow-down' ? 'arrow-up' : 'arrow-down'
	}
	const copyOrderNo = () => {
		uni.setClipboardData({
			data: info.value.order_no,
			success: function() {
				uni.showToast({
					title: '复制成功',
					icon: 'none'
				})
			}
		})
	}
	onLoad(async (option) => {
		if (option.id) {
			info.value = (await getServiceInfo({
				order_id: option.id
			})).result
			payAmount.value = info.value.total_price
		}
		rule.value = (await getCancelRule()).result
	})
	const getPayList = async () => {
		const {
			result
		} = await getPaymentMethod()
		payList.value = result
	}

	const getPayType = (index) => {
		payType.value = payList.value[index].type
		is_third_party_payment.value = payList.value[index].is_third_party_payment
	}

	const iPay = async () => {
		if (payList.value.length == 0) {
			await getPayList()
		}
		popupRef.value.open()
		payType.value = info.value.pay_type ? info.value.pay_type : 'money'
		payList.value.forEach(item => {
			if (item.type == payType.value) {
				is_third_party_payment.value = item.is_third_party_payment
			}
		})
	}
	const closePopup = async () => {
		popupRef.value.close()
		let params = {
			order_id: info.value.id,
			pay_type: payType.value
		}
		if (is_third_party_payment.value == 0) {
			popPwdRef.value.open()
		} else {
			let result = await goPay(params)
			if (result.code == 200) {
				uni.navigateTo({
					url: '/pages-home/service/pay_result?id=' + info.value.id,
				})
			} else {
				uni.navigateTo({
					url: '/pages-home/service/pay_result?id=' + info.value.id + '&err=' + result.msg,
				})
			}
		}
	}

	const doPay = async () => {
		if (!payPwd.value) return uni.$uv.toast('请输入支付密码')
		popPwdRef.value.close()
		let params = {
			order_id: info.value.id,
			pay_type: payType.value,
			password: payPwd.value
		}
		let result = await goPay(params)
		if (result.code == 200) {
			uni.navigateTo({
				url: '/pages-home/service/pay_result?id=' + info.value.id,
			})
		} else {
			uni.navigateTo({
				url: '/pages-home/service/pay_result?id=' + info.value.id + '&err=' + result.msg,
			})
		}
	}
	const contactService = () => {
		// 联系客服逻辑
		console.log('联系客服');
		popRejectRef.value.close()
	};
	const assApply = () => {
		// 申请售后逻辑
		uni.navigateTo({
			url: '/pages-home/service/ass_apply?id=' + info.value.id
		})
	};
	const modifyOrder = () => {
		// 修改订单逻辑
		if (info.value.service_status > 2) {
			opName.value = '修改'
			popRejectRef.value.open()
		} else {
			uni.navigateTo({
				url: '/pages-home/service/modify_order?id=' + info.value.id
			})
		}
	};
	const cancelOrder = async () => {
		// 取消订单逻辑
		if (info.value.service_status > 2) {
			opName.value = '取消'
			popRejectRef.value.open()
		} else {
			popCancelRef.value.open()
		}
	};
	const doCancel = async () => {
		// 取消订单逻辑
		popCancelRef.value.close()
		uni.showModal({
			title: '提示',
			content: '确定要取消订单吗？',
			success: async (res) => {
				if (res.confirm) {
					let params = {
						order_id: info.value.id
					}
					let result = await cancelServiceOrder(params)
					if (result.code == 200) {
						refreshStore.setRefresh(true)
						uni.showToast({
							title: '取消成功',
							icon: 'success'
						})
						uni.navigateBack()
					} else {
						uni.showToast({
							title: result.msg,
							icon: 'none'
						})
					}
				}
			}
		})
	};
	const closeCancel = () => {
		popCancelRef.value.close()
	};
	const showRule = () => {
		popRuleRef.value.open()
	};
	const confirmRule = () => {
		popRuleRef.value.close()
	};
	const comment = () => {
		// 去写评价逻辑
		uni.navigateTo({
			url: '/pages-home/service/service_comment?id=' + info.value.id
		})
	};
	const showTecInfo = () => {
		if (info.value.technician_id > 0 && info.value.takes_order_status > 0) {
			popTecInfoRef.value.open()
		}
	}
</script>

<style lang="scss" scoped>
	.order-detail-container {
		background-color: #f7f7f7 !important;
		min-height: 100vh;
		padding-bottom: 80px;
		width: 100%;

		.progress-section {
			background-color: #fff;
			padding: 20px 15px;
			margin: 10px;
			border-radius: 8px;
		}

		.price1 {
			font-size: 40upx;
			color: #333;
		}

		.staff-info {
			display: flex;
			align-items: center;
			justify-content: flex-start;

			.icon {
				margin: 15px 10px;
			}

			.staff-name {
				font-size: 16px;
				font-weight: 600;
				margin-right: 8px;
				display: flex;
				align-items: center;
			}

			.staff-desc {
				color: #979797;
				font-size: 14px;
				display: inline-block;
			}

			.lbl-info {
				display: flex;
				flex-direction: column;
			}
		}

		.order-section {
			background-color: #fff;
			padding: 20px 15px;
			margin: 10px;
			border-radius: 8px;
		}

		.padding2 {
			padding: 0 30upx;
		}

		.margin20 {
			margin-right: 20upx;
		}

		.thumb {
			width: 80px;
			height: 80px;
			border-radius: 3px;
			margin-right: 20upx;
		}

		.t1 {
			color: #333;
			font-size: 30upx;
		}

		.t2 {
			color: #979797;
			font-size: 24upx;
			text-align: right;
		}

		.jiage {
			margin-left: 20upx;
		}

		.order-info {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 10px 0;

			.lbl_info {
				width: 80px;
				font-size: 24upx;
			}

			.content_info {
				flex: 1;
				text-align: right;
				font-size: 24upx;
			}

			.lbl_pay {
				width: 70px;
				color: #979797;
				font-size: 24upx;
			}

			.pay_info {
				flex: 1;
				text-align: left;
				font-size: 24upx;
			}
		}

		.orderNo {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 24upx;
		}

		.orderNo .lbl_pay {
			color: #979797;
		}

		.orderNo .uv-icon {
			margin-left: 10px;
		}

		.orderNo .uv-button {
			margin-left: 10px;
		}

		.total-price {
			color: #f56c6c;
			font-weight: bold;
		}

		.footer-btn {
			position: fixed;
			bottom: 20px;
			left: 0;
			right: 0;

			.order-actions {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 15px;
				background-color: #fff;
			}

			.contact-service {
				flex: 1;
				margin-right: 10px;
				color: #999;
				border-color: #eee;
			}

			.contact-service ::v-deep .uv-button__icon {
				font-size: 20px;
			}

			.modify-order {
				flex: 1;
				margin-right: 10px;
				color: #d70012;
				border-color: #d70012;
			}

			.cancel-order {
				flex: 1;
				background-color: #d70012;
				color: #fff;
			}
		}
	}

	.popup-content {
		padding: 30upx 0;
		margin: 0 auto;

		.btn {
			margin: 0 30upx;
		}

		.but {
			margin: 0 30upx;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.rule {
			font-size: 26upx;
			line-height: 1.2;
		}

		.confirmbtn {
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}

	.pwd_pop {
		width: 600upx;
		text-align: center;
	}
</style>